<template>
	<view>
		<form @submit="formSubmit" @reset="formReset" class="register-form-container">
			<view class="avatar">
				<image src="/static/login_form_icons/logo.png" class="logo"></image>
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/phone.png" class="icon"></image>
				<input class="form-input" name="phone" type="number" placeholder="请输入手机号" />
			</view>
			<view class="form-item">
				<image src="/static/login_form_icons/pwd.png" class="icon"></image>
				<input class="form-input" name="password" type="password" placeholder="请输入密码" />
			</view>
			<view class="form-item">
				<button class="form-btn" form-type="submit">登录</button>
			</view>
		</form>
	</view>
</template>

<script>
	import store from '@/store/store.js'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				formData: {}
			};
		},
		methods: {
			isBlank(str) {
				return (str === '' || str.trim() === '')
			},
			formSubmit(e) {
				const formData = e.detail.value
				console.log(formData)
				if (this.isBlank(formData.password) || this.isBlank(formData.phone)) {
					return uni.$showMsg('输入参数不能为空', 'error')
				}
				formData.userName = ''
				formData.userType = '1'
				formData.wxId = uni.getStorageSync('openId')
				this.fecthData(formData)
				uni.switchTab({
					url: "/pages/home/home"
				})
			},
			async fecthData(form) {
				const {
					data: res
				} = await uni.$http.post(uni.$http.baseURL + '/user/login', form)
				console.log(res.body.authCode)
				uni.setStorageSync('authCode',res.body.authCode)
				if (re.message === '成功') {
					// store.dispatch('user/setAuthCODE',res.body.authCode)
				} else {
					return uni.$showMsg()
				}

			}
		}
	}
</script>

<style lang="scss">
	.avatar {
		margin-top: 69rpx;
		margin-left: 320rpx;
		margin-bottom: 70rpx;

		.logo {
			height: 120rpx;
			width: 110rpx;
		}
	}

	.form-item {
		display: flex;
		flex-direction: column;

		.icon {
			position: absolute;
			height: 30rpx;
			width: 22rpx;
			margin-top: 28rpx;
			margin-left: 30rpx;
		}

		margin-top: 40rpx;
		padding-left: 95rpx;
		padding-right: 95rpx;

		.form-input {
			padding-left: 60rpx;
			margin-bottom: 40rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}

		.form-btn {
			color: #FFFFFF;
			height: 88rpx;
			width: 100%;
			margin-top: 30rpx;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}
	}
</style>
